<template>
    <Panel :class="$style.panle"
           title="生活服务">
        <section :class="$style.list">
            <div v-for="(item,index) in enters"
                 :key="item.img"
                 :class="$style.item">
                <router-link :to="{name:item.herf}">
                    <img :src="item.img"
                         :alt="item.title">
                    <h4> {{ item.title }}</h4>
                    <p v-if="index === 1">全新升级</p>
                </router-link>
            </div>
        </section>
    </Panel>
</template>

<script type="text/ecmascript-6">
import Panel from "../core/panel.vue"

export default {
    components: {
        Panel,
    },
    data() {
        return {
            enters: [
                {
                    href: "download",
                    img: "//img12.360buyimg.com/jrpmobile/jfs/t4375/104/1184122472/3976/89741da4/58be8a6eNf10193d0.png?width=135&height=135",
                    title: "惠加油",
                }, {
                    href: "home",
                    img: "//img12.360buyimg.com/jrpmobile/jfs/t4747/185/1901740991/5892/1383fb93/58f57851N17ee6993.jpg?width=132&height=132",
                    title: "小白信用",
                }, {
                    href: "home",
                    img: "//img12.360buyimg.com/jrpmobile/jfs/t3241/234/8044685271/3713/7b29f77f/58be89c8Nb9d41295.png?width=135&height=135",
                    title: "信用卡还款",
                }, {
                    href: "home",
                    img: "//img12.360buyimg.com/jrpmobile/jfs/t3172/259/7993557249/4351/fd082707/58be8a81Nd7716a06.png?width=135&height=135",
                    title: "卡转让",
                }, {
                    href: "home",
                    img: "//img12.360buyimg.com/jrpmobile/jfs/t3085/320/8107659086/4344/cdbba2dd/58be8acfNdadcaf00.png?width=135&height=135",
                    title: "定期还款",
                },
            ], // 按钮的数据
        }
    },
}
</script>

<style lang="scss" module>
@import "../../css/element.scss";
.panel {
  @include panel;
}
.list {
  @include list(row);
  background: #fff;
  padding: 0px 0px 40px 0px;
  justify-content: space-around;
  a {
    text-decoration: none;
  }
  .item {
    text-align: center;
    img {
      display: inline-block;
      width: 90px;
      height: 90px;
    }
    h4 {
      font-size: 26px;
      margin-top: 12px;
      color: #666;
    }
    p{
      font-size: 26px;
      color: #ff801a;
      @include overflow;
      margin-top: 12px;
    }
  }
}
</style>
